<template>
    <div class="register">
        <div class="top">
            <div class="title">
                <h1>{{ useDetailStore.hospitaldetailinfo.hospital?.hosname }}</h1>
                <div class="level">
                    <svg t="1706254770994" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2699" width="16" height="16">
                        <path
                            d="M190.193225 471.411583c14.446014 0 26.139334-11.718903 26.139334-26.13831 0-14.44499-11.69332-26.164916-26.139334-26.164916-0.271176 0-0.490164 0.149403-0.73678 0.149403l-62.496379 0.146333c-1.425466-0.195451-2.90005-0.295735-4.373611-0.295735-19.677155 0-35.621289 16.141632-35.621289 36.114522L86.622358 888.550075c0 19.949354 15.96767 35.597753 35.670407 35.597753 1.916653 0 3.808746 0.292666 5.649674 0l61.022819 0.022513c0.099261 0 0.148379 0.048095 0.24764 0.048095 0.097214 0 0.146333-0.048095 0.24457-0.048095l0.73678 0 0-0.148379c13.413498-0.540306 24.174586-11.422144 24.174586-24.960485 0-13.55983-10.760065-24.441669-24.174586-24.981974l0-0.393973-50.949392 0 1.450025-402.275993L190.193225 471.409536z"
                            fill="#ff0000" p-id="2700"></path>
                        <path
                            d="M926.52241 433.948343c-19.283182-31.445176-47.339168-44.172035-81.289398-45.546336-1.77032-0.246617-3.536546-0.39295-5.380544-0.39295l-205.447139-0.688685c13.462616-39.059598 22.698978-85.58933 22.698978-129.317251 0-28.349675-3.193739-55.962569-9.041934-82.542948l-0.490164 0.049119c-10.638291-46.578852-51.736315-81.31498-100.966553-81.31498-57.264215 0-95.466282 48.15065-95.466282 106.126063 0 3.241834-0.294712 6.387477 0 9.532097-2.996241 108.386546-91.240027 195.548698-196.23636 207.513194l0 54.881958-0.785899 222.227314 0 229.744521 10.709923 0 500.025271 0.222057 8.746198-0.243547c19.35686 0.049119 30.239721-4.817726 47.803749-16.116049 16.682961-10.761088 29.236881-25.50079 37.490869-42.156122 2.260483-3.341095 4.028757-7.075139 5.106298-11.20111l77.018118-344.324116c1.056052-4.053316 1.348718-8.181333 1.056052-12.160971C943.643346 476.446249 938.781618 453.944769 926.52241 433.948343zM893.82573 486.837924l-82.983993 367.783411-0.099261-0.049119c-2.555196 6.141884-6.879688 11.596106-12.872169 15.427364-4.177136 2.727111-8.773827 4.351098-13.414521 4.964058-1.49812-0.195451-3.046383 0-4.620227 0l-477.028511-0.540306-0.171915-407.408897c89.323375-40.266076 154.841577-79.670527 188.596356-173.661202 0.072655 0.024559 0.124843 0.049119 0.195451 0.072655 2.99931-9.137101 6.313799-20.73423 8.697079-33.164331 5.551436-29.185716 5.258771-58.123792 5.258771-58.123792-4.937452-37.98001 25.940812-52.965306 44.364417-52.965306 25.304316 0.860601 50.263777 33.656541 50.263777 52.326762 0 0 5.600555 27.563776 5.649674 57.190537 0.048095 37.366026-4.6673 56.847729-4.6673 56.847729l-0.466628 0c-5.872754 30.879288-16.214287 60.138682-30.464849 86.964654l0.36839 0.342808c-2.358721 4.815679-3.709485 10.220782-3.709485 15.943111 0 19.922748 19.088754 21.742187 38.765909 21.742187l238.761895 0.270153c0 0 14.666024 0.465604 14.690584 0.465604l0 0.100284c12.132318-0.638543 24.221658 5.207605 31.100322 16.409738 5.504364 9.016351 6.437619 19.6045 3.486404 28.988218L893.82573 486.837924z"
                            fill="#ff0000" p-id="2701"></path>
                        <path
                            d="M264.827039 924.31872c0.319272 0.024559 0.441045 0.024559 0.295735-0.024559 0.243547-0.048095 0.367367-0.074701-0.295735-0.074701s-0.539282 0.026606-0.271176 0.074701C264.43409 924.343279 264.532327 924.343279 264.827039 924.31872z"
                            fill="#ff0000" p-id="2702"></path>
                    </svg>
                    <p>{{ useDetailStore.hospitaldetailinfo.hospital?.param?.hostypeString }}</p>
                </div>
            </div>
            <div class="content">
                <div class="left">
                    <img src="@/assets/images/logo.png" alt="">
                </div>
                <div class="right">
                    <h1>挂号规则</h1>
                    <div class="time">
                        <p>预约周期：{{ useDetailStore.hospitaldetailinfo.bookingRule?.cycle }}天 放号时间：{{
                            useDetailStore.hospitaldetailinfo.bookingRule?.releaseTime }} 停挂时间：{{
        useDetailStore.hospitaldetailinfo.bookingRule?.stopTime }}</p>
                    </div>
                    <div class="address">
                        <p>具体位置：{{ useDetailStore.hospitaldetailinfo.hospital?.param?.fullAddress }}</p>
                    </div>
                    <div class="route">
                        <p>具体路线：{{ useDetailStore.hospitaldetailinfo.hospital?.route }}
                        </p>
                    </div>
                    <div class="releasetime">
                        <p>退号时间：就诊前一工作日{{ useDetailStore.hospitaldetailinfo?.bookingRule?.quitTime }}前取消</p>
                    </div>

                    <h1>预约挂号规则</h1>
                    <div class="ruleinfo">
                        <p v-for="(item, index) in useDetailStore.hospitaldetailinfo?.bookingRule?.rule" :key="index">{{
                            item
                        }}</p>
                    </div>
                </div>
            </div>
            <div class="department">
                <div class="leftNav">
                    <div>
                        <ul>
                            <li @click="changeindex(i.depname)" :class="{ active: activeFlag == i.depname }"
                                v-for="i in useDetailStore.departmentinfo">{{ i.depname
                                }}</li>
                        </ul>
                    </div>
                </div>
                <div class="departmentInfo">
                    <div v-for="i in useDetailStore.departmentinfo">
                        <div class="header subli">{{ i.depname }}</div>
                        <div class="body">
                            <ul>
                                <li v-for="item in i.children">{{ item.depname }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import useHospitalDetail from '@/store/modules/hospitaldetail'
import { department } from '@/api/hospital/type';
let activeFlag = ref<string>('')
let useDetailStore = useHospitalDetail()
if (activeFlag.value == '') {
    if (useDetailStore.departmentinfo.length > 0)
        activeFlag.value = useDetailStore.departmentinfo.at(0)?.depname!;

}
let changeindex = (index: string) => {
    activeFlag.value = index
    //1 找到所有标记的元素
    //2 再根据名称找到在数组的对应的索引
    //3 根据在数组中的索引找到对应的元素，调用其滚动的方法
    let obj = document.querySelectorAll('.subli')
    let dep: department = useDetailStore.departmentinfo.find(x => x.depname == index)!
    let findindex = useDetailStore.departmentinfo.indexOf(dep);
    obj[findindex]?.scrollIntoView(
        // {
        // behavior: "smooth", //过渡动画效果
        // block: "start", //滚动到位置 默认起始位置 })
        // }
    )
}
</script>

<style lang="scss" scoped>
.top {
    .title {
        display: flex;
        align-items: center;
        // margin: 10px auto;

        h1 {
            font-size: 30px;
            font-weight: 900;
        }

        .level {
            display: flex;
            align-items: center;
            color: #7f7f7f;
            margin-left: 10px;
            margin-top: 2px;

            svg {
                margin-right: 5px;
            }
        }
    }

    .content {
        display: flex;
        justify-content: end;
        margin-top: 20px;

        h1 {
            color: #000;
            font-weight: bold;
            margin: 10px 0px;
            font-style: normal;
        }

        .left {
            img {
                width: 80px;
                height: 80px;
            }
        }

        .right {
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            color: #7f7f7f;

            .time {
                margin-bottom: 5px;
            }

            .address {
                margin-bottom: 5px;
            }

            .route {
                margin-bottom: 5px;
                line-height: 1.2rem;
            }

        }

    }
}

.department {
    display: flex;
    margin-top: 20px;
    width: 100%;

    .leftNav {
        flex: 1;

        ul {
            display: flex;
            flex-direction: column;

            li {
                padding: 5px;
                line-height: 30px;
                color: #7f7f7f;
                background-color: #f8f8f8;
                cursor: pointer;
                text-align: center;
                font-size: 14px;

                &:hover {
                    color: red;
                    background-color: #ffffff;
                }
            }

            .active {
                border-left: 2px red;
                border-style: solid;
                background-color: #ffffff;
            }
        }
    }



    .departmentInfo {
        width: 100%;
        flex: 9;
        height: 100%;
        // 此处的点击左侧导航栏自动滚动的实现是指定容器的高度，
        overflow: hidden;
        max-height: 500px;

        .header {
            padding: 10px 0px;
            padding-left: 10px;
            background-color: #f8f8f8;
            display: flex;
            justify-content: start;
            margin: 5px 0px;
            margin-left: 20px;
        }

        .body {
            color: #7f7f7f;
            padding-left: 10px;

            ul {
                display: grid;
                grid-template-columns: repeat(4, 25%);
                grid-template-rows: auto;

                li {
                    margin: 5px 0px;
                    margin-left: 20px;
                    cursor: pointer;

                    &:hover {
                        color: red;
                    }
                }
            }
        }

    }
}
</style>